<template>
	<div class="export-dialog-view" v-loading="pageLoading">
		<div class="export-dialog">
			<div class="left-lay">
				<div class="split-title">{{ title }}</div>

				<div class="left-line">
					<div class="split-title p0">
						{{ $t("message.ReportFormTable.E_A.lab1") }}
					</div>
				</div>
				<div class="left-line">
					<div class="line-title">
						{{ $t("message.bhView.leftComponents.device") }}
					</div>
					<div class="line-value">{{ $store.state.plantName }}</div>
				</div>

				<div class="left-line">
					<div class="line-title">
						{{ $t("message.bhView.leftComponents.object") }}
					</div>
					<div class="line-value">
						{{
							$store.state.macType == 1
								? $t("message.bhView.leftComponents.machine")
								: $t("message.bhView.leftComponents.piping")
						}}
					</div>
				</div>

				<div class="left-line">
					<div class="line-title">
						{{ $t("message.reportFrom.exportDialog.title_c") }}
					</div>
					<div class="line-value">{{ fileTypeStr }}</div>
				</div>



				<div class="left-draw" id="left-draw"></div>
			</div>

			<div class="tip-lay"></div>

			<div class="right-lay">
				<div class="split-title text-right">
					<i class="el-icon-close" @click="CloseExprotDiloag"></i>
				</div>
				<div class="split-title">
					{{ $t("message.reportFrom.exportDialog.title_l") }}
				</div>
				<div class="right-line">
					<div class="line-title">
						{{ $t("message.reportFrom.exportDialog.title_a") }}
					</div>
					<div class="line-content">
						<span>~</span>
						<!-- <el-date-picker v-model="formExDate" type="month" value-format="MM-yyyy" placeholder=" "  :format="MM-yyyy"
							class="ipt picker"> -->
						<el-date-picker v-model="formExDate" type="month" :format="format" :value-format="format"
							placeholder=" " class="ipt picker orange">
						</el-date-picker>
						<span>{{ $t("message.ReportFormTable.E_A.lab2") }}</span>
					</div>
				</div>

				<div class="right-block-container">
					<div class="right-line">
						<div class="line-title">
							{{ $t("message.reportFrom.exportDialog.title_b") }}
						</div>
					</div>
					<div class="right-line">
						<el-radio-group v-model="formCorrRateRule">
							<el-radio :label="4">{{
								$t("message.reportFrom.exportDialog.radio_1d")
							}}</el-radio>
							<el-radio :label="1">{{
								$t("message.reportFrom.exportDialog.radio_1a")
							}}</el-radio>
							<el-radio :label="2">{{
								$t("message.reportFrom.exportDialog.radio_1b")
							}}</el-radio>
							<el-radio :label="3">{{
								$t("message.reportFrom.exportDialog.radio_1c")
							}}</el-radio>
						</el-radio-group>
					</div>
				</div>

				<div class="right-block-container">
					<div class="right-line">
						<div class="line-title">
							{{ $t("message.reportFrom.exportDialog.title_c") }}
						</div>
					</div>
					<div class="right-line">
						<el-radio-group v-model="formDailyExType">
							<el-radio :label="1">{{
								$t("message.reportFrom.exportDialog.radio_2a")
							}}</el-radio>
							<el-radio :label="2">{{
								$t("message.reportFrom.exportDialog.radio_2b")
							}}</el-radio>
							<el-radio :label="3">{{
								$t("message.reportFrom.exportDialog.radio_2c")
							}}</el-radio>
						</el-radio-group>
					</div>
				</div>

				<div class="right-block-container">
					<div class="right-line">
						<div class="line-title">
							{{ $t("message.reportFrom.exportDialog.title_d") }}
						</div>
					</div>
					<div class="right-line">
						<el-checkbox-group v-model="formDeterName" :min="1">
							<el-checkbox checked :label="0">{{
								$t("message.reportFrom.exportDialog.check_3a")
							}}</el-checkbox>
							<el-checkbox :label="1">{{
								$t("message.reportFrom.exportDialog.check_3b")
							}}</el-checkbox>
							<!-- <el-checkbox :label="3">{{
								$t("message.reportFrom.exportDialog.check_3c")
							}}</el-checkbox> -->
						</el-checkbox-group>
					</div>
				</div>

				<div class="right-block-container">
					<div class="right-line">
						<div class="line-title">
							{{ $t("message.reportFrom.exportDialog.title_e") }}
						</div>
					</div>
					<div class="right-line">
						<el-radio-group v-model="formCorrRateMark">
							<el-radio :label="1">{{
								$t("message.reportFrom.exportDialog.check_4a")
							}}</el-radio>
							<el-radio :label="0">{{
								$t("message.reportFrom.exportDialog.check_4b")
							}}</el-radio>
						</el-radio-group>
					</div>
				</div>

				<div class="right-block-container">
					<div class="right-line">
						<div class="line-title">
							{{ $t("message.ReportFormTable.E_A.lab3") }}
						</div>
					</div>
					<div class="right-line">
						<el-radio-group v-model="formInspecter">
							<el-radio :label="1">{{
								$t("message.reportFrom.exportDialog.check_4a")
							}}</el-radio>
							<el-radio :label="0">{{
								$t("message.reportFrom.exportDialog.check_4b")
							}}</el-radio>
						</el-radio-group>
					</div>
				</div>


				<!-- <div class="right-block-container">
					<div class="right-line">
						<div class="line-title">
							{{ $t("message.reportFrom.exportDialog.title_g") }}
						</div>
					</div>
					<div class="right-line">
						<el-radio-group v-model="formInspectCertificateNo">
							<el-radio :label="1">{{
								$t("message.reportFrom.exportDialog.check_4a")
							}}</el-radio>
							<el-radio :label="0">{{
								$t("message.reportFrom.exportDialog.check_4b")
							}}</el-radio>
						</el-radio-group>
					</div>
				</div> -->

				<!-- <div class="right-block-container">
					<div class="right-line">
						<div class="line-title">
							{{ $t("message.reportFrom.exportDialog.title_h") }}
						</div>
					</div>
					<div class="right-line">
						<el-radio-group v-model="formUpdBeforMeasuredValue">
							<el-radio :label="1">{{
								$t("message.reportFrom.exportDialog.check_4a")
							}}</el-radio>
							<el-radio :label="0">{{
								$t("message.reportFrom.exportDialog.check_4b")
							}}</el-radio>
						</el-radio-group>
					</div>
				</div> -->

				<!-- <div class="right-line">
					<div class="line-title" style="width: 30%">
						{{ $t("message.reportFrom.exportDialog.title_i") }}
					</div>
					<div class="line-content">
						<el-select
							v-model="formWindcraftJudgColor"
							class="select-ipt"
							style="margin: 0 8px 0 16px"
							placeholder=" "
						>
							<el-option
								v-for="item in corrColorData"
								:key="item.key"
								:label="item.label"
								:value="item.key"
							>
							</el-option>
						</el-select>
					</div>
				</div> -->

				<!-- <div class="right-line">
					<div class="divider" />
				</div> -->

				<div class="right-line bottom-border">
					<div class="line-title" style="width: 30%">
						{{ $t("message.reportFrom.exportDialog.title_j") }}
					</div>
					<div class="line-content">
						<el-select v-model="operDate" class="select-ipt orange" style="margin: 0 8px 0 16px"
							placeholder=" ">
							<el-option v-for="item in LifeAssBaseDate" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</div>

				<div class="right-block-container">
					<div class="right-line">
						<div class="line-title">
							{{ $t("message.ReportFormTable.D_C.lab3") }}
						</div>
					</div>
					<div class="right-line">
						<el-radio-group v-model="PrintType">
							<el-radio :label="1">{{ $t("message.ReportFormTable.D_C.lab4") }}</el-radio>
							<el-radio :label="2">{{ $t("message.ReportFormTable.D_C.lab5") }}</el-radio>
						</el-radio-group>
					</div>
				</div>

				<!-- <div class="right-line">
					<div class="line-title" style="width: 100%">
						{{ $t("message.reportFrom.exportDialog.tip") }}
					</div>
				</div> -->


			</div>
			<footer class="footer-view">
				<div class="">
					<div class="line-title" style="width: 100%">
						{{ $t("message.reportFrom.exportDialog.tip") }}
					</div>
				</div>
				<div>
					<el-button @click="CloseExprotDiloag">Cancel</el-button>
					<el-button type="primary" @click="onExportClick">OK</el-button>
				</div>
			</footer>
		</div>
	</div>
</template>

<script>
import {
	GetThickDeterResLifeAssBaseDate,
	getWindcraftJudgColor,

	ExThckDeterResReportVerify,
	ExThckDeterResReport,
	CollectFiles
} from "@/api/api";
import * as svg_opt from "@/utils/svg_opt.js";
import { getLocalStorage } from "@/utils/storage";
import timeFormat from "@/utils/timeFormat";

export default {
	props: ["title", "fileTypeStr", "selectMacData", "fileRadio"],
	name: "E_A_Export",
	data() {
		return {
			pageLoading: false,

			LifeAssBaseDate: [],

			corrColorData: [],

			// drawableData 图纸数据
			isSvgLoaded: false,
			svgSourceUrl: "", // 图纸地址
			drawableData: null, // 图纸数据

			markupsPosList: [], // 球标组

			exportDrawContentList: [],
			exportCurrentIndex: 0,
			cachedReDatas: [],

			formExDate: "",
			formCorrRateRule: 4,
			formDailyExType: 1,
			formDeterName: [],
			formCorrRateMark: 1,
			formInspecter: 1,
			formInspectCertificateNo: 1,
			formUpdBeforMeasuredValue: 1,
			formWindcraftJudgColor: "",
			operDate: "",
			format: timeFormat(),
			PrintType: 1
		};
	},
	components: {},
	watch: {},
	methods: {
		getLifeAssBaseDateApi() {
			GetThickDeterResLifeAssBaseDate({
				PltCode: this.$store.state.pltCode,
			}).then((res) => {
				if (res.data.code != 0) {
					return;
				}
				res.data.data.forEach((dateItem) => {
					this.LifeAssBaseDate.push({
						label: dateItem,
						value: dateItem,
					});
				});
				this.operDate = this.LifeAssBaseDate[6].value;
			});
		},

		getWindcraftJudgColorApi() {
			getWindcraftJudgColor().then((res) => {
				console.log(res, 333333333333333);
				if (res.data.code != 0) {
					return;
				}
				this.corrColorData = res.data.data;
				this.corrColorData.unshift(this.corrColorData.pop())
				this.formWindcraftJudgColor = this.corrColorData[0].key;
			});
		},

		CloseExprotDiloag() {
			this.$emit("CloseExprotDiloag");
		},

		reloadMachineDrawing(inData) {
			console.log("reloadMachineDrawing --- ", inData);
			let data = {
				DmgCode: inData.macCode,
				CorrCode: this.formWindcraftJudgColor.toString(),
				BlnCorrCode: this.formWindcraftJudgColor.toString(),
				SelectDate: this.operDate,
				PltCode: inData.pltCode,
				Option: "",
				PosCode: "-1",
				CorrJudg: "",
				Account: getLocalStorage("userName"),
			};

			getSvgData(data).then((res) => {
				console.log("res---", res);
				if (!res || res.data.code != 0) {

					this.$alert(this.$t("message.cadViewer.loadSvgFileError"), '', {
						confirmButtonText: 'OK',
						type: 'warning',
					});
					return;
				}
				this.svgSourceUrl = "";
				let dataJson = res.data.data;

				if (dataJson.length > 0) {
					let item = dataJson[0];
					console.log(item.drW_PASS);
					// this.svgSourceUrl = item.drW_PASS;
					let inSourceUrl = item.drW_PASS;

					this.markupsPosList = this.genBallMarkupsList(dataJson);

					let num = inSourceUrl.lastIndexOf(".") + 1;
					this.sourceExt = inSourceUrl.substring(num);
					this.sourceUrl = inSourceUrl;

					let EXT = this.sourceExt
					if (
						EXT == "png" ||
						EXT == "jpg" ||
						EXT == "gif" ||
						EXT == "bmp" ||
						EXT == "jpeg" ||
						EXT == "tif" ||
						EXT == "tiff"
					) {
						this.isSourcePic = true;
						this.svgSourceUrl = require("@/assets/model/method-draw-image.svg");
					} else {
						this.isSourcePic = false;
						this.svgSourceUrl = inSourceUrl;
					}

					if (!this.loadSvgWhenReShow) this.loadSvg();
				}
			});
		},

		loadSvg() {
			console.log(this.svgSourceUrl, "this.svgSourceUrl");
			if (!this.svgSourceUrl || this.svgSourceUrl == "") {
				svg_opt.removeSvg();
				this.isSourcePic = false;
				this.markupsPosList = [];
				this.onSvgLoaded();
				return;
			}

			svg_opt.setSvgLineWidthRatio(1.5);
			svg_opt.setSvgBoundingBoxRatio(0, 10, 0.9);
			svg_opt.setCanClickSelectMarkup(false);
			svg_opt.setCanEditSelectMarkup(false);
			svg_opt.setCanFitPositionAndScale(false);
			svg_opt.setEditDotWidthRatio(3);
			svg_opt.AddSvg(this.svgSourceUrl, "left-draw", null,
					false,
					0,
					0,
					this.sourceExt == "wmf" ? 1 : -1);
			svg_opt.SetSvgMouseMode(0);
			svg_opt.setLoadCallBack(this.onSvgLoaded);
		},

		async onSvgLoaded(error) {
			if (error) {
				console.log(error);
				return;
			}
			this.isSvgLoaded = true;

			if (this.isSourcePic) {
				svg_opt.changeSvgElementData({
					tagName: "img-content",
					paramName: "xlink:href",
					newValue: this.sourceUrl,
				});
			}

			svg_opt.genMarkupOrignDataFromExternalData(this.markupsPosList);
			var tar = svg_opt.exportSvgDataStr();

			// 请求参数
			let temp = {
				excuType: Number(this.fileRadio),
				pltCode: this.selectMacData[this.exportCurrentIndex].pltCode,
				macType: this.selectMacData[this.exportCurrentIndex].macType,
				dmgCode: this.selectMacData[this.exportCurrentIndex].macCode,
				exDate: this.formExDate,
				corrRateRule: this.formCorrRateRule,
				dailyExType: this.formDailyExType,
				deterName: this.formDeterName.toString(),
				corrRateMark: this.formCorrRateMark,
				inspecter: this.formInspecter,
				inspectCertificateNo: this.formInspectCertificateNo,
				updBeforMeasuredValue: this.formUpdBeforMeasuredValue,
				windcraftJudgColor: this.formWindcraftJudgColor,
				lifeAssBaseDate: this.operDate,
				svgHtml: tar,
			};

			let re = await exThickDeterResReport(temp);
			return
		},

		genBallMarkupsList(originData) {
			var reList = [];
			for (var i = 0; i < originData.length; i++) {
				let orignItem = originData[i];
				if (orignItem.poS_ORDR == null) continue;

				let temp = {};
				temp.sId = orignItem.poS_ORDR;
				temp.shapeType = Number(orignItem.blN_TYPE) + 12;
				temp.showType = "trans";
				temp.showID = orignItem.poS_ORDR;
				temp.lineColor = "#0000FF";
				temp.lineWidth = "5";
				temp.fontSize = orignItem.blN_FNTSIZ;
				temp.fontName = orignItem.blN_FNTNAM;
				temp.lineStyle = "0";
				temp.points = orignItem.thckBlnPoints;
				if (temp.points[0].blN_COLOR)
					temp.ballFillColor = temp.points[0].blN_COLOR;
				else temp.ballFillColor = "#ffffff";
				reList.push(temp);

				for (var j = 0; j < orignItem.thckBlnPoints.length; j++) {
					orignItem.thckBlnPoints[j].x =
						orignItem.thckBlnPoints[j].blN_X;
					orignItem.thckBlnPoints[j].y =
						orignItem.thckBlnPoints[j].blN_Y;
				}
			}
			return reList;
		},

		async runOne() {
			this.pageLoading = true;
			let MacNumb = [];
			for (let i = 0; i < this.selectMacData.length; i++) {
				MacNumb.push(this.selectMacData[i].macName)
			}
			let dataJson = {
				PltCode: this.selectMacData[0].pltCode,
				MacType: this.selectMacData[0].macType,
				MacNumb,	//是	List<string>	机器名称，数组，选中多少传多少，如100-E001
				ExDateRange: this.formExDate,	//是	string	出力范围 yyyy-MM
				CorrRateCalc: this.formCorrRateRule,	//是	int	腐蚀率计算 腐食率計算ルール　1：短期、2：長期、3：LS、4：最大値
				ExYMDType: this.formDailyExType,	//是	int	日付出力形式 日付出力形式　1：月表示、2：年表示、3：日表示
				DeterNamePrint: this.formDeterName.length == 0 ? [] : this.formDeterName.length == 2 ? ['0', '1'] : this.formDeterName[0] == 0 ? ['0'] : ['1'], 	//是	List<string>	测定点名印字 “0:”是定点No,”1”，定点名称，可以两个都加
				CorrRateMark: this.formCorrRateMark,	//是	int	评价方法
				ThckCapacity: this.formInspecter,
				LifeAccessBaseyear: this.operDate,	//是	string	寿命评价基准年 yyyy-MM
				PrintType: this.PrintType
			}

			let res = await ExThckDeterResReportVerify(dataJson);
			if (res.data.code == 0) {
				this.$alert(res.data.data, ' ', {
					confirmButtonText: 'OK',
					type: 'warning',
				});
				this.pageLoading = false;
				return;
			}
			let rr = await ExThckDeterResReport(dataJson);
			this.pageLoading = false;
			if (rr.data.code != 0) {
				this.$alert(rr.data.data, ' ', {
					confirmButtonText: 'OK',
					type: 'warning',
				});
				return;
			}

			window.open(rr.data.data);
			this.$emit("CloseExprotDiloag");

		},
		async onExportClick() {
			this.pageLoading = true;
			let MacNumb = [];
			for (let i = 0; i < this.selectMacData.length; i++) {
				MacNumb.push(this.selectMacData[i].macName)
			}
			let dataJson = {
				PltCode: this.selectMacData[0].pltCode,
				MacType: this.selectMacData[0].macType,
				MacNumb,	//是	List<string>	机器名称，数组，选中多少传多少，如100-E001
				ExDateRange: this.formExDate,	//是	string	出力范围 yyyy-MM
				CorrRateCalc: this.formCorrRateRule,	//是	int	腐蚀率计算 腐食率計算ルール　1：短期、2：長期、3：LS、4：最大値
				ExYMDType: this.formDailyExType,	//是	int	日付出力形式 日付出力形式　1：月表示、2：年表示、3：日表示
				DeterNamePrint: this.formDeterName.length == 0 ? [] : this.formDeterName.length == 2 ? ['0', '1'] : this.formDeterName[0] == 0 ? ['0'] : ['1'], 	//是	List<string>	测定点名印字 “0:”是定点No,”1”，定点名称，可以两个都加
				CorrRateMark: this.formCorrRateMark,	//是	int	评价方法
				ThckCapacity: this.formInspecter,
				LifeAccessBaseyear: this.operDate,	//是	string	寿命评价基准年 yyyy-MM
				PrintType: this.PrintType
			}

			let rr = await ExThckDeterResReportVerify(dataJson);
			if (rr.data.code == 0) {
				this.pageLoading = false;
				this.$alert(rr.data.data, ' ', {
					confirmButtonText: 'OK',
					type: 'warning',
				});
				return
			}
			if (!rr) {
				this.pageLoading = false;
				return;
			}
			let res = await ExThckDeterResReport(dataJson);
			this.pageLoading = false;
			if (!res) {
				return
			}
			this.$emit("CloseExprotDiloag");
			let noDataStr = res.data.msg;
			if (noDataStr && this.PrintType == 2 && res.data.code == 2) {
				if (getLocalStorage("lang") == 0) {

					this.$alert(`${noDataStr}<p style="color:red;">${this.$t('message.public.tip5')}</p>`, '', {
						confirmButtonText: 'OK',
						type: 'warning',
						dangerouslyUseHTMLString: true,
					});
				} else {

					this.$alert(`${noDataStr}<p style="color:red;">${this.$t('message.public.tip5')}</p>`, '', {
						confirmButtonText: 'OK',
						type: 'warning',
						dangerouslyUseHTMLString: true,
					});
				}
			}
			if (res.data.data) {
				window.open(res.data.data)
			}

			return;

		},

		getTime() {
			let date = new Date();
			let year = date.getFullYear();
			let mounth = date.getMonth() + 1;
			this.formExDate = `${year}-${mounth}`;
		}
	},
	created() {
		this.getTime();
		this.getLifeAssBaseDateApi();
		this.getWindcraftJudgColorApi();
	},
	mounted() { },
	beforeDestroy() { },
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.export-dialog-view {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 6;
}

.export-dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 712px;
	height: 625px;
	// height: 292px;
	background: #ffffff;
	box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
		0px 9px 28px 0px rgba(0, 0, 0, 0.08),
		0px 6px 16px -8px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: row;
	padding: 0 12px;
}

.left-lay {
	position: relative;
	width: 40%;
	height: 100%;
	// border-right: 1px solid #ccc;
	display: flex;
	flex-direction: column;
	// background-color: blanchedalmond;

	.left-line {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0px 20px;
		padding-top: 10px;

		.line-title {
			font-size: 14px;
			font-weight: 700;
			color: rgba(0, 0, 0, 0.85);
			line-height: 22px;
		}

		.line-value {
			font-size: 14px;
			font-weight: 400;
			color: #7b7b7b;
			line-height: 22px;
			margin-left: 10px;
		}
	}

	.left-draw {
		position: absolute;
		top: 100vh;
		width: 750px;
		height: 611px;
		// flex-grow: 1;
		// flex-shrink: 1;
		background-color: bisque;
	}
}

.tip-lay {
	background: red;
	width: 7px;
	border-radius: 4px;
	background: #ccc;
	margin-top: 46px;
	margin: 46px 15px 85px 15px;
}

.right-lay {
	position: relative;
	width: 60%;
	height: 100%;
	display: flex;
	flex-direction: column;

	.el-icon-close {
		font-size: 16px;
		cursor: pointer;
		width: 46px;
		height: 45px;
		line-height: 45px;
	}

	.right-block-container {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.text-right {
		padding: 0 !important;
		text-align: right;
	}

	.right-line {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0px 12px;
		padding-top: 10px;

		.line-title {
			font-size: 14px;
			font-weight: 700;
			color: rgba(0, 0, 0, 0.85);
			line-height: 22px;
			text-align: left;
			margin-right: 10px;
		}

		.line-content {
			flex-grow: 1;
			flex-shrink: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.ipt {
			//     width: 368px;
			width: 100%;
			height: 32px;

			::v-deep .el-input__inner {
				width: 100%;
				height: 32px;
			}

			::v-deep .el-input__inner:focus {
				border: 1px solid #dcdfe6;
			}

			::v-deep .el-input__icon {
				line-height: 32px;
				color: #909399;
			}

			::v-deep .el-input__suffix {
				width: 32px;
				right: 0;
				background: #dee0e3;
			}
		}

		.picker {
			width: 130px;
			margin: 0px 10px;

			::v-deep .el-input__inner {
				width: 130px;
			}

			::v-deep .el-input__suffix {
				background: transparent;
			}
		}

		.orange {
			::v-deep .el-input__inner {
				// width: 130px;
				background-color: #FFDEACFF;
			}
		}

		.divider {
			width: 100%;
			height: 1px;
			background-color: #f0f0f0;
		}
	}

	.right-line.bottom-border {
		padding-bottom: 10px;
		// border-bottom: 1px solid #f0f0f0;
	}

	.flex-row {
		flex-direction: row;
	}

	.flex-column {
		flex-direction: column;
	}
}

.split-title {
	width: 100%;
	font-size: 16px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
	line-height: 22px;
	padding: 12px 12px;
	border-bottom: 1px solid #f0f0f0;
}

.footer-view {
	width: calc(100% - 30px);
	box-sizing: border-box;
	position: absolute;
	z-index: 10;
	bottom: 16px;
	// padding: 0 15px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	// background-color: red;
	padding-top: 17px;
	border-top: 1px solid #f0f0f0;
	font-size: 16px;
	font-weight: 700;

	button {
		width: 82px !important;
		height: 32px;
		// background: #ffffff;
		// border: 1px solid #d9d9d9;
		margin-left: 12px;
		border-radius: 4px;
		font-size: 14px;
		font-weight: 500;
		line-height: 0;
	}

	button:nth-child(2) {
		// background: #106ebe;
		// color: #fff;
	}
}

.p0 {
	padding: 12px 0;
}
</style>
